Angular একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ডায়নামিক এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক। Angular প্রজেক্ট শুরু করতে হলে, কিছু প্রাথমিক সেটআপ করতে হবে। এখানে Angular প্রজেক্ট সেটআপের জন্য প্রয়োজনীয় ধাপগুলো বিস্তারিতভাবে দেওয়া হলো।
npm ইনস্টলেশন চেক করুন
Node.js ইনস্টল করার পর npm স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যায়। ইনস্টলেশন চেক করতে কমান্ড লাইন বা টার্মিনালে নিচের কমান্ডটি রান করুন:
npm -v
এটি npm এর সংস্করণ দেখাবে যদি সঠিকভাবে ইনস্টল হয়ে থাকে।
Angular CLI ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
npm install -g @angular/cli
এই কমান্ডটি Angular CLI গ্লোবালি ইনস্টল করবে। ইনস্টলেশনের পর, Angular CLI এর সংস্করণ চেক করতে নিচের কমান্ডটি ব্যবহার করুন:
ng version
Angular CLI ইনস্টল হওয়ার পর একটি নতুন Angular প্রজেক্ট তৈরি করা খুবই সহজ। নতুন প্রজেক্ট তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng new project-name
এখানে project-name আপনার প্রজেক্টের নাম হবে। এই কমান্ডটি রান করার পর Angular CLI কিছু প্রশ্ন করবে:
এই কমান্ডটি রান করার পর, একটি নতুন Angular প্রজেক্ট তৈরি হবে এবং প্রজেক্টের মধ্যে সমস্ত ফাইল এবং ফোল্ডার তৈরি হবে।
Angular প্রজেক্টের ডিরেক্টরি স্ট্রাকচার সাধারণত নিম্নরূপ:
প্রজেক্ট তৈরি হওয়ার পর, প্রজেক্টটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
cd project-name
ng serve
এটি আপনার অ্যাপ্লিকেশনটি http://localhost:4200/
এ চালু করবে। আপনি ব্রাউজারে গিয়ে অ্যাপ্লিকেশনটি দেখতে পারবেন।
Angular CLI এর কিছু সাধারণ কমান্ড যা প্রজেক্ট তৈরি, কম্পোনেন্ট তৈরি, সার্ভার চালানো ইত্যাদির জন্য ব্যবহৃত হয়:
প্রজেক্ট তৈরি:
ng new project-name
অ্যাপ্লিকেশন সার্ভার চালানো:
ng serve
কম্পোনেন্ট তৈরি:
ng generate component component-name
সার্ভিস তৈরি:
ng generate service service-name
মডিউল তৈরি:
ng generate module module-name
প্রোডাকশন বিল্ড তৈরি:
ng build --prod
Angular প্রজেক্ট সেটআপ করা খুবই সহজ এবং Angular CLI এর মাধ্যমে এটি অত্যন্ত দ্রুত করা যায়। Node.js এবং npm ইনস্টলেশন, Angular CLI ইন্সটল করা এবং প্রজেক্ট তৈরি করার পর আপনি দ্রুত Angular অ্যাপ্লিকেশন তৈরি করতে শুরু করতে পারবেন। Angular এর স্ট্রাকচার এবং কমান্ড লাইনের ব্যবহার আপনাকে দক্ষ এবং স্কেলেবল অ্যাপ্লিকেশন ডেভেলপ করতে সহায়ক হবে।
Angular CLI (Command Line Interface) হলো Angular অ্যাপ্লিকেশন তৈরি এবং পরিচালনা করার জন্য একটি শক্তিশালী টুল। এটি কমান্ড লাইন থেকে Angular প্রজেক্ট তৈরি, বিল্ড, টেস্ট, এবং ডিপ্লয় করার সুবিধা দেয়। Angular CLI ব্যবহার করে নতুন একটি প্রজেক্ট তৈরি করা খুবই সহজ এবং দ্রুত। নিচে Angular CLI দিয়ে নতুন প্রজেক্ট তৈরি করার ধাপগুলি দেওয়া হলো।
Angular প্রজেক্ট তৈরি করতে হলে প্রথমে Angular CLI ইনস্টল করা প্রয়োজন। যদি আপনার সিস্টেমে Angular CLI ইনস্টল না করা থাকে, তবে কমান্ড লাইন বা টার্মিনালে নিচের কমান্ডটি ব্যবহার করে এটি ইনস্টল করুন:
npm install -g @angular/cli
এই কমান্ডটি Angular CLI গ্লোবালি ইনস্টল করবে। ইনস্টলেশন শেষে, Angular CLI এর সংস্করণ চেক করতে নিচের কমান্ডটি ব্যবহার করুন:
ng version
Angular CLI ইনস্টল হওয়ার পর, নতুন একটি Angular প্রজেক্ট তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng new project-name
এখানে project-name আপনার পছন্দের প্রজেক্টের নাম হতে হবে। এই কমান্ডটি রান করার পর Angular CLI কিছু প্রশ্ন করবে:
Angular CLI এই কমান্ডটি রান করার পর প্রয়োজনীয় সমস্ত ফাইল এবং ডিরেক্টরি তৈরি করবে এবং প্রজেক্টের ভিতরে সমস্ত নির্ভরশীল প্যাকেজ ইনস্টল করবে।
নতুন Angular প্রজেক্ট তৈরি হওয়ার পর, আপনি যে ডিরেক্টরিটি পাবেন তা দেখতে হবে কিছু এভাবে:
প্রজেক্ট তৈরি হওয়ার পর, আপনার অ্যাপ্লিকেশনটি চালু করতে নিচের কমান্ডটি ব্যবহার করুন:
cd project-name
ng serve
এই কমান্ডটি প্রজেক্টের ফোল্ডারে ঢুকে Angular অ্যাপ্লিকেশন চালু করবে এবং http://localhost:4200/
এ আপনার অ্যাপ্লিকেশনটি দেখতে পাবেন। এখন আপনি আপনার ব্রাউজারে গিয়ে অ্যাপ্লিকেশনটি দেখতে পারবেন।
কম্পোনেন্ট তৈরি:
ng generate component component-name
সার্ভিস তৈরি:
ng generate service service-name
মডিউল তৈরি:
ng generate module module-name
প্রোডাকশন বিল্ড তৈরি:
ng build --prod
টেস্ট রান করা:
ng test
ইউনিট টেস্ট চালানো:
ng e2e
Angular CLI এর মাধ্যমে একটি নতুন Angular প্রজেক্ট তৈরি করা খুবই সহজ। এটি আপনাকে কমান্ড লাইন থেকে সমস্ত প্রয়োজনীয় সেটআপ করতে সহায়তা করে, যেমন নতুন প্রজেক্ট তৈরি করা, কম্পোনেন্ট তৈরি করা, সার্ভার চালানো ইত্যাদি। Angular CLI ব্যবহার করে আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টের প্রক্রিয়া অনেক দ্রুত এবং কার্যকর হয়।
Angular প্রজেক্টে ফাইল এবং ফোল্ডারের স্ট্রাকচার একটি সুনির্দিষ্ট কাঠামো অনুসরণ করে, যা ডেভেলপারদের কোড এবং রিসোর্সগুলো ভালোভাবে সংগঠিত রাখতে সাহায্য করে। নিচে Angular প্রজেক্টের সাধারণ স্ট্রাকচার এবং এর ফোল্ডারগুলোর ব্যাখ্যা দেওয়া হলো।
একটি Angular প্রজেক্ট সাধারণত এইভাবে স্ট্রাকচার করা হয়:
my-angular-project/
├── e2e/
├── node_modules/
├── src/
│ ├── app/
│ ├── assets/
│ ├── environments/
│ └── index.html
├── angular.json
├── package.json
├── tsconfig.json
├── tslint.json
└── README.md
npm install
কমান্ড দিয়ে ইনস্টল করা হয়। এই ফোল্ডারটি অটোমেটিকভাবে তৈরি হয় এবং এটি আপনার প্রজেক্টের বাইরের অংশ, তাই সাধারণত এটি ম্যানুয়ালি পরিবর্তন করা হয় না।root
ফোল্ডারের মতো কাজ করে।Angular প্রজেক্টের স্ট্রাকচার খুবই পরিষ্কার এবং সুসংগঠিত, যাতে ডেভেলপাররা অ্যাপ্লিকেশন ডেভেলপ করতে এবং রক্ষণাবেক্ষণ করতে সহজভাবে কাজ করতে পারে। src/app
ফোল্ডারের মধ্যে মূল অ্যাপ্লিকেশন কোড রাখা হয়, এবং অন্যান্য ফোল্ডার ও ফাইল গুলি অ্যাপ্লিকেশনের সেটিংস, কনফিগারেশন, টেস্টিং, এবং মিডিয়া ফাইলের জন্য ব্যবহৃত হয়।
Node.js হলো একটি ওপেন সোর্স রানটাইম এনভায়রনমেন্ট, যা JavaScript কোড সার্ভারে রান করানোর জন্য ব্যবহৃত হয়। এটি Google Chrome এর V8 JavaScript engine ব্যবহার করে এবং JavaScript রান করার জন্য প্রয়োজনীয় সকল ইন্টারফেস সরবরাহ করে। এর মাধ্যমে আপনি সার্ভার-সাইড অ্যাপ্লিকেশন যেমন API সার্ভার, রিয়েল-টাইম অ্যাপ্লিকেশন ইত্যাদি তৈরি করতে পারেন।
npm (Node Package Manager) হলো Node.js এর জন্য প্যাকেজ ম্যানেজার, যা বিভিন্ন লাইব্রেরি এবং টুল ইনস্টল করার জন্য ব্যবহৃত হয়।
Node.js ডাউনলোড এবং ইনস্টল করুন
প্রথমে, Node.js ডাউনলোড করার জন্য অফিসিয়াল ওয়েবসাইটে যান: Node.js অফিসিয়াল সাইট
এখানে দুইটি ভার্সন পাওয়া যাবে:
সাধারণত LTS ভার্সন নির্বাচন করা উচিত। LTS ভার্সনটি ডাউনলোড এবং ইনস্টল করুন।
.msi
ফাইলটি রান করুন এবং নির্দেশনা অনুসরণ করে Node.js ইনস্টল করুন।.pkg
ফাইলটি রান করুন এবং নির্দেশনা অনুসরণ করুন।Linux: টার্মিনালে নিচের কমান্ড ব্যবহার করে Node.js ইনস্টল করতে পারেন:
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
ইনস্টলেশন চেক করুন
Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে কিনা তা চেক করতে কমান্ড লাইন বা টার্মিনালে নিচের কমান্ডগুলো ব্যবহার করুন:
Node.js এর সংস্করণ চেক করতে:
node -v
এটি Node.js এর বর্তমান সংস্করণ দেখাবে। উদাহরণস্বরূপ: v16.13.0
npm এর সংস্করণ চেক করতে:
npm -v
এটি npm এর সংস্করণ দেখাবে। উদাহরণস্বরূপ: 8.1.0
Node.js এবং npm সফলভাবে ইনস্টল হলে, এখন আপনি npm ব্যবহার করে বিভিন্ন প্যাকেজ ইনস্টল করতে পারবেন।
npm ব্যবহার করে নতুন প্যাকেজ ইনস্টল করার জন্য:
npm install <package-name>
যেমন, Angular CLI ইনস্টল করার জন্য:
npm install -g @angular/cli
এতে Angular CLI গ্লোবালি ইনস্টল হবে।
Node.js এবং npm ইনস্টল করার মাধ্যমে আপনি JavaScript বা TypeScript দিয়ে সার্ভার-সাইড অ্যাপ্লিকেশন ডেভেলপ করতে পারবেন। npm এর মাধ্যমে বিভিন্ন লাইব্রেরি, ফ্রেমওয়ার্ক এবং টুল সহজে ইনস্টল করা যায়। Node.js এবং npm সঠিকভাবে ইনস্টল হলে, আপনি দ্রুত ডেভেলপমেন্ট প্রক্রিয়া শুরু করতে পারবেন।
Angular CLI (Command Line Interface) হল একটি শক্তিশালী টুল যা Angular অ্যাপ্লিকেশন তৈরি, ডেভেলপ, টেস্ট এবং ডিপ্লয় করতে সাহায্য করে। Angular CLI ব্যবহার করে বিভিন্ন কমান্ডের মাধ্যমে অ্যাপ্লিকেশন পরিচালনা করা যায়। এখানে কিছু সাধারণ কমান্ডের ব্যাখ্যা দেওয়া হলো যা Angular প্রজেক্ট তৈরি এবং পরিচালনা করতে সহায়তা করবে।
Angular CLI দিয়ে নতুন একটি Angular প্রজেক্ট তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng new project-name
এখানে project-name আপনার পছন্দের প্রজেক্টের নাম হতে হবে। এই কমান্ডটি একটি নতুন প্রজেক্ট তৈরি করবে এবং প্রজেক্টের জন্য সমস্ত প্রয়োজনীয় ফাইল ও ডিরেক্টরি তৈরি করবে।
Angular অ্যাপ্লিকেশন চালানোর জন্য ng serve কমান্ডটি ব্যবহার করা হয়:
ng serve
এই কমান্ডটি অ্যাপ্লিকেশনটি সার্ভারে চালু করে এবং সাধারণত http://localhost:4200/ এ অ্যাপ্লিকেশনটি দেখাবে। এটি ডেভেলপমেন্ট সার্ভার চালানোর জন্য ব্যবহৃত হয়।
নতুন একটি কম্পোনেন্ট তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng generate component component-name
এটি একটি নতুন কম্পোনেন্ট তৈরি করবে এবং প্রজেক্টের src/app/ ফোল্ডারে কম্পোনেন্টের জন্য সমস্ত ফাইল (HTML, CSS, TypeScript, এবং টেস্ট ফাইল) তৈরি করবে। আপনি g c এর শর্টকাটও ব্যবহার করতে পারেন।
ng g c component-name
নতুন একটি সার্ভিস তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng generate service service-name
এটি একটি নতুন সার্ভিস তৈরি করবে এবং src/app/ ফোল্ডারে সার্ভিসের জন্য একটি TypeScript ফাইল তৈরি করবে।
নতুন একটি মডিউল তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng generate module module-name
এটি একটি নতুন মডিউল তৈরি করবে এবং প্রজেক্টের src/app/ ফোল্ডারে মডিউলের জন্য একটি TypeScript ফাইল তৈরি করবে।
নতুন একটি ক্লাস তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng generate class class-name
এটি একটি নতুন ক্লাস তৈরি করবে এবং src/app/ ফোল্ডারে ক্লাসের জন্য একটি TypeScript ফাইল তৈরি করবে।
অ্যাপ্লিকেশনের ইউনিট টেস্ট চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
ng test
এটি Jasmine এবং Karma ব্যবহার করে আপনার অ্যাপ্লিকেশনটির টেস্ট রান করবে এবং টেস্টের রেজাল্ট দেখাবে।
এন্ড-টু-এন্ড টেস্টিং চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
ng e2e
এটি Protractor ব্যবহার করে আপনার অ্যাপ্লিকেশনের এন্ড-টু-এন্ড টেস্ট চালাবে।
অ্যাপ্লিকেশনের প্রোডাকশন বিল্ড তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:
ng build --prod
এটি অ্যাপ্লিকেশনের কোডকে মিনিফাই করবে এবং প্রোডাকশন পরিবেশে ব্যবহার উপযোগী একটি বিল্ড তৈরি করবে। এটি আপনার প্রজেক্টের dist/ ফোল্ডারে স্ট্যাটিক ফাইল তৈরি করবে।
Angular প্রজেক্টে প্যাকেজের নির্ভরতা আপডেট করতে নিচের কমান্ডটি ব্যবহার করুন:
npm update
এটি আপনার package.json ফাইলের ভিত্তিতে সকল প্যাকেজ আপডেট করবে।
প্রজেক্টে নতুন কোনো প্যাকেজ ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:
npm install <package-name>
এটি নির্দিষ্ট প্যাকেজ ইনস্টল করবে এবং package.json ফাইলে প্যাকেজের তথ্য যোগ করবে।
Angular প্রজেক্টে কোড লিন্টিং চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng lint
এটি আপনার কোডের স্টাইল চেক করবে এবং সমস্ত লিন্টিং সম্পর্কিত ত্রুটি দেখাবে।
Angular CLI একটি শক্তিশালী টুল, যা Angular অ্যাপ্লিকেশন ডেভেলপমেন্টকে দ্রুত, সহজ এবং দক্ষ করে তোলে। এটি বিভিন্ন গুরুত্বপূর্ণ কমান্ড সরবরাহ করে যেমন নতুন প্রজেক্ট তৈরি, কম্পোনেন্ট তৈরি, সার্ভিস এবং মডিউল তৈরি, টেস্টিং, প্রোডাকশন বিল্ড, এবং আরও অনেক কিছু। Angular CLI এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টের বিভিন্ন কাজ খুব সহজেই সম্পন্ন করতে পারবেন।
Read more